<template>
    <div>
        <div class="text-xl">【云端报警风险】</div>
        <div ref="chart" class="w-full h-full"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
let mychart = null
const chart = ref(null)
const props = defineProps(['data'])

const option = ref({
    radar: {
        name: {
            textStyle: {
                fontSize: 14
            }
        },
        shape: 'polygon',
        center: ['50%', '50%'],
        raduis: '80%',
        startAngle: 120,
        axisLine: {
            lineStyle: {
                color: 'rgba(5,213,255,.8)'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(5,213,255,.8)',
                width: 1,
            }
        },
        indicator: props.data.risks.map(i => ({
            name: i.name,
            max: 100
        })),
        splitArea: {
            show: false
        }
    },
    polar: {
        center: ['50%', '50%'],
        radius: '0%',
    },
    angleAxis: {
        min: 0,
        interval: 5,
        splitLine: {
            show: false
        }
    },
    radiusAxis: {
        min: 0,
        interval: 20,
        splitLine: {
            show: true
        }
    },
    series: {
        type: 'radar',
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
            normal: {
                color: '#05D5ff'
            }
        },
        areaStyle: {
            normal: {
                color: '#05D5ff',
                opacity: 0.5,
            }
        },
        lineStyle: {
            normal: {
                color: '#05D5ff',
                width: 2
            }
        },
        label: {
            normal: {
                show: true,
                color: '#fff'
            }
        },
        data: [
            {
                value: props.data.risks.map(i => i.value)
            }
        ]
    }
})
const initChart = () => {
    mychart.setOption(option.value)
}
onMounted(() => {
    mychart = echarts.init(chart.value)
    initChart()
})
</script>

<style lang="scss" scoped></style>